<template>
	<view class="page bg-top  ">
		<!-- 顶部导航栏 start -->
		<view class="cu-custom">
			<view class="cu-bar fixed bg-top text-333"
				:style="{ height: CustomBar + 'px', paddingTop: StatusBar + 'px' }">
				<view class="action" @tap="backPage"><text class="cuIcon-back "></text></view>
				<view class="content" :style="[{ top: StatusBar + 'px' }]">
					<view class="text-lg ">{{i18n['会员权益']}}</view>
				</view>

			</view>
		</view>
		<!-- 顶部导航栏 end -->
		<view class=" padding-lr-100 relative" :style="[{ top: CustomBar +48 +'px' }]">
			<view class="text-white relative"  style="bottom: 60rpx;">
				<view class="fu-fs80 " v-if="uinfo">
					{{ uinfo.empirical}}
				</view>
				<view class="text-df" v-if="list&&uinfo">
					{{i18n['成长值']}} ：{{ uinfo.empirical}}/{{list[uinfo.user_level+1].empirical}}
				</view>
				<!-- <view class="text-df" v-if="list&&uinfo"> <text
						v-if="uinfo.user_level>0">LV{{uinfo.user_level}}</text>{{list[uinfo.user_level].name}}
				</view> -->
			</view>
			<view class="flex align-center relative" style="bottom: 30rpx;">
				<image :src="imgBaseUrl+'user/vip-2.png'" mode="aspectFill" class="fu-block-26 flex-shrink"></image>
				<view class="cu-progress  xs">
					<view class="bg-ffe" :style="[{ width: progressWidth + '%' }]"></view>
				</view>
				<image :src="imgBaseUrl+'user/vip-3.png'" mode="aspectFill" class="fu-block-16 flex-shrink"></image>
			</view>
			<view class="text-white relative" style="bottom: 30rpx;" v-if="isMax&&list&&uinfo">
				LV{{uinfo.user_level + 1}}{{list[uinfo.user_level ].name}}{{uinfo.empirical}}
			</view>
			<view class="flex justify-between  align-center">
				<view class="text-sm text-ffd">{{i18n['升级后可享更多会员权益']}}</view>
				<view class="bg-ffd  radius-100 text-center padding-tb-10 padding-lr-16 text-333  text-sm"
					@click="isShow = true">等级规则</view>
			</view>
		</view>
		<view class="relative" :style="[{ top: CustomBar + 160+'px' }]">
			<view class="padding-lr">
				<view v-for="(item,index) in list" :key="index">
					<view class="text-lg text-333 flex align-center margin-top">
						<image :src="imgBaseUrl+'user/vip-1.png'" mode="aspectFill" class="fu-block-20 margin-right-14">
						</image>
						<view class="margin-right-20 text-bold text-lg">{{item.name}}{{i18n['特权']}}</view>
						<view class="bg-ffe text-333 radius-100 padding-lr-16 padding-tb-4 text-sm text-center"
							v-if="item.unlock == 1">{{i18n['已解锁']}}
						</view>
						<view class="lock text-white text-sm text-center padding-lr-10 padding-tb-4 radius-100"
							v-if="item.unlock == 0 && isMax">
							{{i18n['达到']}} {{item.empirical}}{{i18n['活跃值解锁']}}
						</view>
					</view>
					<view class=" padding-bottom">
						<!-- <image :src="imgBaseUrl+'user/vip01.png'" mode="aspectFill"
							class="margin-top width-178 height-45  " /> -->
						<image :src="item.icon" mode="aspectFill" class="margin-top width-178 height-45 " />
						<!-- <view class="text-333 text-sm margin-top">{{ item.icon }}</view> -->
					</view>
				</view>
				<!-- 		<view class="text-df text-white text-center bg-theme padding-tb-20 round margin-top" @tap="handleJump"
					data-url="/pages/user/wallet/recharge/index"> {{i18n['充值']}}</view> -->
			</view>
		</view>
		<fu-popup v-model="isShow" mode="center" border-radius="16" :mask-close-able="true">
			<view class=" bg-white width-540 height-600 relative">
				<view class="solid-bottom text-lg text-bold title text-center text-333  height-88 line-height-88"> {{i18n['等级规则']}}
					<view class="cuIcon-close text-xl" @click="isShow = false"></view>
				</view>
				<view class=" padding-lr-sm padding-tb-sm">
					<scroll-view scroll-y style="height: 472rpx">
						<jyf-parser :html="rules"></jyf-parser>
					</scroll-view>
				</view>
			</view>
		</fu-popup>
	</view>
</template>

<script>
	/**
	 * @author 邓东方
	 * @description 对接接口 20201-4-19  邓东方
	 */
	import richText from "@/common/utils/richText.js";
	import {
		IMG_BASE_URL
	} from '@/common/config.js';
	export default {
		data() {
			return {
				loading: true,
				list: [{
						name: "红包回馈",
						icon: IMG_BASE_URL + "user/vip01.png"
					},
					{
						name: "专享徽章",
						icon: IMG_BASE_URL + "user/vip02.png"
					},
					{
						name: "精品折扣",
						icon: IMG_BASE_URL + "user/vip03.png"
					},
					{
						name: "生活特权",
						icon: IMG_BASE_URL + "user/vip04.png"
					},
					{
						name: "支付返现",
						icon: IMG_BASE_URL + "user/vip05.png"
					},
				],
				isShow: false,
				rules: "", //会员规则
				userInfo: {}, //用户信息
				progressWidth: 0, //进度条信息
				uinfo: '', //当前会员信息
			};
		},
		computed: {
			isMax() {
				return this.uinfo.user_level + 1 < this.list.length;
			}
		},
		onLoad() {
			this.getMemberRules();
			this.getMemberPower();
			let userInfo = this.$store.state.userInfo
			this.userInfo = userInfo;
		},
		methods: {
			backPage(){
				uni.navigateBack()
			},
			/**
			 * @description 获取会员权益规则
			 */
			getMemberRules() {
				this.$api.post(global.apiUrls.postOperationGetColumn, {
					category_id: 12, // 12 会员等级规则
				}).then(res => {
					if (res.data.code == 1) {
						this.rules = res.data.data.content;
					}
				}).catch(err => {
					console.log(err);
				})
			},
			/**
			 * @description 会员权益数据
			 */
			getMemberPower() {
				this.$api.post(global.apiUrls.memberPower).then(res => {
					if (res.data.code == 1) {
						this.list = res.data.data.levels;
						this.uinfo = res.data.data.uinfo;
						this.list.forEach((item,index)=>{
							item.icon = IMG_BASE_URL + 'user/vip0' + (index+1)+'.png'
						})
						//成长值不为0  当前成长值 /下一级会员所需成长值  
						if(this.uinfo.empirical!==0){
							//判断是否是最高级会员
							if(res.data.data.uinfo.user_level +1 ==this.list.length ){
								this.progressWidth = res.data.data.uinfo.empirical / Number(this.list[res.data.data.uinfo.user_level].empirical ) * 100
							}else{
								this.progressWidth = res.data.data.uinfo.empirical / Number(this.list[res.data.data.uinfo.user_level +1 ].empirical ) * 100
							}
						}else{
							this.progressWidth = 0 //如果为 0 直接=0
						}

					}
				}).catch(err => {
					console.log(err);
				})
			}
		},
	};
</script>

<style lang="scss">
	html,
	body {
		height: 100%;
		overflow-y: scroll;
	}

	.page {
		height: 100%;
		// box-sizing: border-box;//可使上面背景图固定
		// overflow-y: scroll; //可使上面背景图固定
	}

	.bg-top {
		background: url($IMG_BASE_URL+'user/vip-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 560rpx;
	}

	.bg-ffd {
		background-color: #FFDA8D;
	}

	.cu-progress {
		background: rgba(255, 255, 255, 0.3);

	}

	.bg-ffe {
		background-color: #FFE27F;
	}

	.text-ffd {
		color: #FFDA8D;
	}

	.lock {
		background: rgba(0, 0, 0, 0.3);
	}

		.title {
			position: sticky;
			top: 0;
			z-index: 99;

			.cuIcon-close {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: 20rpx;
				z-index: 100;
			}
		}
	
</style>
